<template>
  <div class="store-info-container">
    <div class="page-header">
      <h1>商店信息管理</h1>
    </div>

    <div class="store-info-content" v-loading="loading">
      <el-form 
        :model="storeForm" 
        :rules="storeRules" 
        ref="storeForm" 
        label-width="120px"
        class="store-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商店名称" prop="storename">
              <el-input v-model="storeForm.storename" placeholder="请输入商店名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商店类型" prop="storetype">
              <el-select v-model="storeForm.storetype" placeholder="请选择商店类型">
                <el-option label="中餐" value="中餐"></el-option>
                <el-option label="西餐" value="西餐"></el-option>
                <el-option label="快餐" value="快餐"></el-option>
                <el-option label="火锅" value="火锅"></el-option>
                <el-option label="烧烤" value="烧烤"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商店描述" prop="storedescribe">
          <el-input 
            v-model="storeForm.storedescribe" 
            type="textarea" 
            :rows="4"
            placeholder="请输入商店描述"
          ></el-input>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系电话" prop="storephone">
              <el-input v-model="storeForm.storephone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业时间" prop="storetime">
              <el-input v-model="storeForm.storetime" placeholder="例如：09:00-22:00"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商店地址" prop="storeaddress">
          <el-input v-model="storeForm.storeaddress" placeholder="请输入商店地址"></el-input>
        </el-form-item>

        <el-form-item label="商店图片" prop="storepicture">
          <el-upload
            class="store-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleImageSuccess"
            :before-upload="beforeImageUpload"
          >
            <img v-if="storeForm.storepicture" :src="storeForm.storepicture" class="store-image">
            <i v-else class="el-icon-plus store-uploader-icon"></i>
          </el-upload>
          <div class="upload-tip">建议尺寸：800x600px，文件大小不超过2MB</div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitStore" :loading="submitting">保存信息</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getStoreInfo, updateStore } from '@/api/store'
import { mapGetters } from 'vuex'

export default {
  name: 'StoreInfo',
  data() {
    return {
      loading: false,
      submitting: false,
      storeForm: {
        storename: '',
        storetype: '',
        storedescribe: '',
        storephone: '',
        storetime: '',
        storeaddress: '',
        storepicture: '',
        userid: null
      },
      storeRules: {
        storename: [
          { required: true, message: '请输入商店名称', trigger: 'blur' }
        ],
        storetype: [
          { required: true, message: '请选择商店类型', trigger: 'change' }
        ],
        storephone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        storeaddress: [
          { required: true, message: '请输入商店地址', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    
    uploadUrl() {
      return '/store/upload'
    }
  },
  mounted() {
    this.loadStoreInfo()
  },
  methods: {
    async loadStoreInfo() {
      this.loading = true
      try {
        const storeId = this.userInfo.storeid || 1
        const response = await getStoreInfo(storeId)
        if (response.data && response.data.code === 20000) {
          this.storeForm = { ...response.data.data }
        } else {
          // 使用模拟数据
          this.loadMockStoreInfo()
        }
      } catch (error) {
        console.error('加载商店信息失败:', error)
        this.loadMockStoreInfo()
      } finally {
        this.loading = false
      }
    },

    loadMockStoreInfo() {
      this.storeForm = {
        storename: '川味小厨',
        storetype: '中餐',
        storedescribe: '正宗川菜，麻辣鲜香，欢迎品尝',
        storephone: '13800138000',
        storetime: '09:00-22:00',
        storeaddress: '成都市锦江区春熙路123号',
        storepicture: 'https://shanfood.oss-cn-chengdu.aliyuncs.com/elema/upload/2025-06-29/e89fef7cf745431a81358d530abc4bf0.jpg',
        userid: this.userInfo.userid
      }
    },

    handleImageSuccess(response) {
      if (response.code === 20000) {
        this.storeForm.storepicture = response.data
        this.$message.success('图片上传成功')
      } else {
        this.$message.error('图片上传失败')
      }
    },

    beforeImageUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('只能上传图片文件!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
        return false
      }
      return true
    },

    async submitStore() {
      try {
        await this.$refs.storeForm.validate()
        
        this.submitting = true
        
        const storeData = {
          ...this.storeForm,
          userid: this.userInfo.userid
        }
        
        const response = await updateStore(storeData)
        if (response.data && response.data.code === 20000) {
          this.$message.success('保存成功')
        } else {
          this.$message.error(response.data?.msg || '保存失败')
        }
      } catch (error) {
        console.error('保存商店信息失败:', error)
        this.$message.error('保存失败')
      } finally {
        this.submitting = false
      }
    },

    resetForm() {
      this.$refs.storeForm.resetFields()
      this.loadStoreInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.store-info-container {
  padding: 20px;

  .page-header {
    margin-bottom: 30px;

    h1 {
      margin: 0;
      font-size: 24px;
      color: #333;
    }
  }

  .store-info-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .store-form {
      max-width: 800px;
      margin: 0 auto;
    }

    .store-uploader {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 200px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        border-color: #409EFF;
      }

      .store-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 200px;
        height: 150px;
        line-height: 150px;
        text-align: center;
      }

      .store-image {
        width: 200px;
        height: 150px;
        display: block;
        object-fit: cover;
      }
    }

    .upload-tip {
      font-size: 12px;
      color: #999;
      margin-top: 8px;
    }
  }
}
</style> 